<template>
  <Modal v-model="modal.show" width="550" :title="modal.title">
    <Form ref="form" :model="formItem" :rules="ruleValidate" :label-width="150">
      <FormItem label="登录名" prop="loginName"><Input v-model="formItem.loginName" placeholder="" style="width: 200px" />
      </FormItem>
      <FormItem label="真实姓名" prop="realName"><Input v-model="formItem.realName" placeholder="" style="width: 200px" />
      </FormItem>
      <FormItem label="联系方式" prop="phone"><Input v-model="formItem.phone" placeholder="" style="width: 200px" />
      </FormItem>
      <template v-for="(item, index) in formDynamic.items">
        <FormItem label="所属院区" prop="areaID" :key="index" v-if="formItem.loginName !== ''">
          <Select v-model="item.areaID" style="width:200px" label-in-value @on-change="chg(index)">
            <Option v-for="item in areaList" :value="item.areaID" :key="item.areaID">{{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="部门-角色-科别" prop="roleID" v-if="formItem.loginName !== ''" :key="index">
          <Row>
            <Col span="20">
            <Cascader :data="cascader" :load-data="loadData" v-width="300" v-model="item.value" />
            </Col>
            <Col span="4"><Button type="error" long @click="handleRemove(index)" icon="md-close"
              v-if="index >= 1"></Button></Col>
          </Row>
        </FormItem>
      </template>
      <FormItem v-if="formItem.loginName !== ''"><Button type="primary" long @click="handleAdd" icon="md-add"
          style="width:50px;" v-if="formItem.areaID !== ''"></Button></FormItem>

    </Form>
    <template #footer>
      <div>
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button type="primary" @click="handleOk">确定</Button>
      </div>
    </template>
  </Modal>
</template>
<script setup>
import http from '@/util/http'
import { reactive } from 'vue'
let { proxy } = getCurrentInstance()
const emit = defineEmits(['initList'])
let i = 0
let index = 1
let formDynamic = reactive({
  items: [
    {
      value: '',
      index: 1,
      areaID: ''
    }
  ]
})

const chg = (index) => {
  i = index
}

const handleAdd = () => {
  index++;
  formDynamic.items.push({
    value: '',
    index: index,
    areaID: ''
  });
}
const handleRemove = (index) => {
  formDynamic.items.splice(index, 1)
}
let modal = reactive({ show: false, title: '' })
const form = ref()

let cascader = ref([])
let areaList = reactive([])
const initAreaList = () => {
  http.get('/Basic/Area/List', {}, (response) => {
    areaList = response.data.data
  })
}
initAreaList();


const initCascader = () => {
  http.get('/Basic/Dept/CascaderList', {}, (response) => {
    cascader = response.data.data
  })
}
initCascader();

const loadData = (item, callback) => {
  item.loading = true;
  setTimeout(() => {
    if (item.type === 'dept') {
      http.get('/Basic/Role/CascaderList?deptID=' + item.value, {}, (response) => {

        item.children = response.data.data
        callback();
      })
    }
    if (item.type === 'role') {
      http.get('/Basic/Category/CascaderList?areaID=' + formDynamic.items[i].areaID, {}, (response) => {

        item.children = response.data.data
        callback();
      })
    }
    item.loading = false;
  }, 300);
}


let formItem = reactive({
  deptRoleCategory: [],
  roleID: '',
  areaID: [],
  loginName: '',
  realName: '',
  phone: '',
})

const show = (type, data) => {
  form.value.resetFields()
  modal.show = true
  formItem.spid = ''
  if (type == 1) {
    modal.title = '添加账号'
  } else {
    formItem.userID = data.userID
    formItem.roleID = data.roleID
    formItem.loginName = data.loginName
    formItem.realName = data.realName
    formItem.phone = data.phone
    modal.title = '编辑账号'
  }
}

const ruleValidate = {
  areaID: [{ required: true, message: '请输入', trigger: 'blur' }],
  loginName: [{ required: true, message: '请输入', trigger: 'blur' }],
  realName: [{ required: true, message: '请输入', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入', trigger: 'blur' }],
}

const handleOk = () => {
  formDynamic.items.forEach(element => {
    formItem.deptRoleCategory.push(element.value)
    formItem.areaID.push(element.areaID)
  });
  http.post('/Basic/User/AddOrUpdate', toRaw(formItem), (response) => {
    if (response.data.flag) {
      emit('initList')
      proxy.$Message.success(response.data.msg)
      modal.show = false
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })

}

defineExpose({
  show,
})
</script>
